<!-- 聚类实验一数据集 -->
<template>
    <div class="body">
        <div id="point1" class="pie-wrap"></div>
        <div id="point2" class="pie-wrap"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "Exp1DataSet",
    data() {
        return {
            blobs: [],
            moons: [],
            option1: {},
            option2: {},
        };
    },

    mounted() {
        this.getData();
        this.$nextTick(() => {
            this.drawPieChart();
        });
    },

    methods: {
        async getData() {
            let { data } = await this.$http.get("/two/moons/dataset");
            for (let i = 0; i < data.blobs.length; i++) {
                const element = data.blobs[i];
                this.blobs.push(element);
            }

            for (let i = 0; i < data.moons.length; i++) {
                const element = data.moons[i];
                this.moons.push(element);
            }
            this.chartPie1.setOption(this.option1);
            this.chartPie2.setOption(this.option2);
        },

        drawPieChart() {
            document.getElementById("point1").width = document.getElementById(
                "point1"
            ).width;
            document.getElementById("point1").height = document.getElementById(
                "point1"
            ).height;
            document.getElementById("point2").width = document.getElementById(
                "point2"
            ).width;
            document.getElementById("point2").height = document.getElementById(
                "point2"
            ).height;

            this.chartPie1 = echarts.init(document.getElementById("point1"));
            this.chartPie2 = echarts.init(document.getElementById("point2"));
            this.option1 = {
                xAxis: {},
                yAxis: {},
                title: {
                    text: "blobs",
                    x: "center",
                    y: "bottom",
                },

                series: [
                    {
                        symbolSize: 20,
                        data: this.blobs,
                        type: "scatter",
                        itemStyle: {
                            color: 'blue',
                        },
                    },
                    
                ],
            };
            this.option2 = {
                xAxis: {},
                yAxis: {},
                title: {
                    text: "moons",
                    x: "center",
                    y: "bottom",
                },
                series: [
                    {
                        symbolSize: 20,
                        data: this.moons,
                        type: "scatter",
                        itemStyle: {
                            color: 'red',
                        },
                    },
                ],
            };
            this.chartPie1.setOption(this.option1);
            this.chartPie2.setOption(this.option2);
        },
    },
};
</script>

<style  scoped>
.body {
    height: 100%;
    color: rgb(69, 69, 110);
}
.pie-wrap {
    width: 50%;
    height: 50%;
    float: left;
}
</style>
